<template>
	<view class="mydetailscontent">
		<my-top title="详情" :isline="true" bgcolor="#000000">
			<template slot="save">
				<view class="rightsave">
					<text class="todaybianji1 iconfont"></text>
					<text class="todayfenxiang iconfont"></text>
					<text class="todaygengduo1 iconfont"></text>
				</view>
			</template>
		</my-top>
		<view class="details-content">
			<!-- 标题 -->
			<view class="titlebox">
				<text></text>
				<text> {{optiondetails.title}}</text>
			</view>
			<!-- 时间 -->
			<view class="datebox  flex" v-if="optiondetails.issueTime">
				<text>{{optiondetails.issueTime | formatdate(this)}}</text>
				<text>{{optiondetails.startTime.substr(0,5)}}</text>
			</view>
			<!-- 地址地图 -->
			<view class="adressbox flex flex-direction align-center" v-if="optiondetails.latitude">
				<view class="adress flex justify-start">
					<text class="mylefticon iconfont todaydidian2"></text>
					<text>{{optiondetails.classAddress}}</text>
				</view>
				<view class="map">
					<view class="page-section page-section-gap">
						<map v-show="mapIsHidden" style="width: 100%; height: 300rpx;" :latitude="optiondetails.latitude" :longitude="optiondetails.longitude" :markers="map.covers">
						</map>
					</view>
				</view>
			</view>
			<view class="solidbox">
				<text class="solid"></text>
			</view>
			<!-- 参与者 -->
			<view class="participant flex align-center justify-between">
				<view class="pant">
					<text class="mylefticon iconfont todaycanyuzhe1"></text>
					<text>参与者</text>
				</view>
				<view class="pantlist flex align-center flex-twice justify-start">
					<text class="personimg">李</text>
					<text class="personimg">李</text>
					<text class="personimg">李</text>
					<text class="personimg">李</text>
					<text class="personimg">李</text>
					<text class="todaygengduo1 iconfont"></text>
				</view>
				<view class="personcount">
					20位参与者
				</view>
			</view>
			<view class="solidbox">
				<text class="solid"></text>
			</view>
			<!-- 提醒 -->
			<view class="participant flex align-center" v-if="optiondetails.notify">
				<view class="pant">
					<text class="iconfont mylefticon todaytixing2"></text>
					<text>提醒</text>
				</view>
				<view class="pantlist">
					<text class="distraction"  v-for="(item,index) in alerlist" :key='index'>提前{{item}}分钟</text>
				</view>
			</view>
			<view class="solidbox">
				<text class="solid"></text>
			</view>
			<!-- 公开范围 -->
			<view class="participant flex align-center" v-if="optiondetails.scheduleOpenName">
				<view class="pant">
					<text class="iconfont mylefticon todaygongkaifanwei"></text>
					<text>公开范围</text>
				</view>
				<view class="pantlist">
					<text class="distraction">{{optiondetails.scheduleOpenName}}</text>
				</view>
			</view>
			<view class="solidbox">
				<text class="solid"></text>
			</view>
			<!-- 备注 -->
			<my-showmedia :edId='1'></my-showmedia>
			<view class="participant flex flex-direction" v-if="false">
				<view class="pant">
					<text class="iconfont mylefticon todaybeizhu2"></text>
					<text>备注</text>
				</view>
				<view class="remark">
					<!-- txt -->
					<view class="remark_txt">
						<text>我是备注我是备注</text>
						<text>我是备注我是备注</text>
					</view>

					<view class="remark_image2  flex justify-start">
						<image mode="widthFix" src="../../../static/img/menu-tx.png"></image>
						<image mode="widthFix" src="../../../static/img/menu-tx.png"></image>
						<image src="../../../static/img/menu-tx.png" mode="widthFix"></image>
						<image src="../../../static/img/menu-tx.png" mode="widthFix"></image>
<video
					id="myVideo"
					class="remark_video2"
					object-fit='cover'
					src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
					 @error="videoErrorCallback" 
					 :danmu-list="danmuList" 
					 enable-danmu danmu-btn controls></video>
					</view>
					
					<view class="myaudio">
						<!-- startPic='current.poster' :endPic='current.poster'  :url='path' -->
						<my-audio  :startPic='current.poster' :endPic='current.poster'  :url='path'></my-audio>
					</view>
					<!-- <view class="page-section page-section-gap" style="text-align: center;">
					</view> -->
					
				</view>
			</view>
			<!-- 日程数据展示 -->
			<view class="participant flex flex-direction">
				<view class="pant">
					<text class="iconfont mylefticon todaygongkaifanwei"></text>
					<text>日程数据统计</text>
				</view>
				
			</view>
			<view class="solidbox">
				<text class="solid"></text>
			</view>
			<view class="datadetailslist flex flex-direction" v-if="optiondetails.tongji">
				<view class="list-progress align-center flex justify-between">
					<view class="period">
						日程周期
					</view>
					<view class="period flex-2 justify-end">
						{{optiondetails.tongji.issueTime}} ~ {{optiondetails.tongji.finishTime}}
					</view>
				</view>
				<view class="list-progress  flex justify-between">
					<view class="period">
						完成次数
					</view>
					<view class="progress flex align-center justify-start">
						<view class="stokewidth">
							<progress :percent="optiondetails.tongji.finishPercent" active stroke-width="8" border-radius='12px' backgroundColor="#999"/>
						</view>
						 <view class="rightgress">
						 	 <text>{{optiondetails.tongji.finishCount}}</text>/<text>{{optiondetails.tongji.count}}</text>
						 </view>
					</view>
				</view>
				<view class="list-progress  flex justify-between">
					<view class="period">
						待办次数
					</view>
					<view class="progress flex align-center">
						<view class="stokewidth">
							 <progress :percent="optiondetails.tongji.unfinishedPercent" active stroke-width='8' border-radius='10' backgroundColor="#999"/>
						</view>
						
						<view class="rightgress">
							<text>{{optiondetails.tongji.unfinishedCount}}</text>/<text>{{optiondetails.tongji.count}}</text>
						</view>
					</view>
				</view>
				<view class="list-progress flex justify-between">
					<view class="period">
						错过次数
					</view>
					<view class="progress flex align-center">
						<view class="stokewidth">
							 <progress :percent="optiondetails.tongji.missPercent" active stroke-width='8' :border-radius='20' backgroundColor="#999"/>
						</view>
						<view class="rightgress">
							<text>{{optiondetails.tongji.missCount}}</text>/<text>{{optiondetails.tongji.count}}</text>
						</view>
					</view>
				</view>
			
			</view>
			<my-calendar
					ref="calendar"
					@selected-change='btnselectdata' 
					@dchange='changecalender' 
					@days-change='daysChange'
					:timeStr="timeStr"
					define='t2'
					 :monthlist='monthlist'
					@switchClass="switchClass">
					<template slot="daysTotal">
						<view>
							小
						</view>
					</template>
				 </my-calendar>
			<!-- 日程数据展示 -->
			<view class="participant flex align-center justify-between">
				<view class="pant">
					<text class="iconfont mylefticon todayxinde"></text>
					<text>心得</text>
				</view>
				<!-- <view class="pantlist">
					<text class="distraction">2020/10/12 </text>
				</view> -->
				<view class="openall flex align-center">
					<text>查看全部</text>
					<text class="iconfont todaygengduo"></text>
				</view>
			</view>
			<view class="solidbox">
				<text class="solid"></text>
			</view>
			
			<view class="btnok flex flex-direction align-start" v-for="(item,index) in pindlist" :key='index'>
				<!-- 错过 -->
				<block v-if="item.state ==1"> 
					<text class="date">2020/10/19  8:55-9:55</text>
					<text class="name">此日程还没有完成哦，请点击下面按钮，完成它吧~~~</text>
					<view class="confirmbox flex flex-2 justify-center"  @click="changeclick(item)">
						<view class="confirm">
							<text class="iconfont todaywancheng"></text>
						</view>
					</view>
				</block>
				<!-- 待办 -->
				<block v-if="item.state ==2">
					<text class="date">2020/10/19  8:55-9:55</text>
					<text class="name">此日程还没开始哦，如已提前完成请点击下面按钮，完成它吧~~~</text>
					<view class="confirmbox flex flex-2 justify-center"  @click="changeclick(item)">
						<view class="confirm">
							<text class="iconfont todaywancheng"></text>
						</view>
					</view>
				</block>
				<!-- 心得 -->
				<block v-if="item.state ==3">
					<text class="date">2020/10/19  8:55-9:55</text>
					<text class="name">此刻有什么想法，请点击下面按钮记录下来吧~~~</text>
					<view class="confirmbox flex flex-2 justify-center"  @click="changeclick(item)">
						<view class="confirm">
							<text class="iconfont todayxinde"></text>
						</view>
					</view>
				</block>
				<block v-if="item.state ==4">
					<!-- 显示 -->
					<my-showmedia  @showvideo='showvideo' :meadialist='item' :edId='2'></my-showmedia>
					
				</block>
			</view>
			<block v-if="pindlist.length==0">
			<view class="btnok flex flex-direction align-start" >
				<text class="date">2020/10/19  8:55-9:55</text>
				<text class="name">还未建立日程哦，点击下面按钮新建事件吧~~~</text>
				<view class="confirmbox flex flex-2 justify-center" >
					<view class="confirm">
						<text class="iconfont todaytianjia"></text>
					</view>
				</view>
			</view>
			</block>
			<!-- <view class="btnok flex flex-direction align-center">
				<text class="name">此日程还没有完成哦，请点击下面按钮，完成它吧~~~</text>
				<view class="confirm">
					<text class="iconfont todaywancheng"></text>
				</view>
			</view> -->
		</view>
		<!-- 点击预览 -->
		<my-screenvideo ref='screenvideo'></my-screenvideo>
		<view class="invoice-popup">
			<my-popup type="bottom" ref="unipopup">
				<view class="invoice-popup-content">
					<view class="mymedia">
						<my-media  @changemedia='changemedia' :currentItem='mediaoption'></my-media>
					</view>
			</view>
		</my-popup>
		 </view>
	</view>
</template>

<script>
	import moment from "moment";
	import {searchScheduleInfo,typeEdit,showScheduleCalendarById,showScheduleExperienceById} from '@/api/api.js';
	// 音頻播放器
	export default {
		filters:{
			formatdate:(val)=>{
				if(val){
					let time = moment(val,'YYYY-MM-DD');
					let istoday = moment().format('YYYY-MM-DD') == val?'(今天)':'';
					let year  = time.format('MM月DD日');
					let week = time.day();
					let weeks = ['周一','周二','周三','周四','周五','周六','周日'];
					let date = `${year}${istoday}   ${weeks[week - 1]}`;
					// console.log(date,istoday,year,val,week);
					return date
				}
			}
		},
		data() {
			return {
				mapIsHidden:true,
				mediaoption:{},
				// 点击心得的状态
				pindlist:[],
				monthlist:[],
				calendarList:[],
				alerlist:[],
				optiondetails:{
					
				},
				ismedia:true,
				// 日历相关
				timeStr:'2021-01-22',
				path: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
				title: 'map',
				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				danmuValue: '',

				map: {
					latitude: 39.909,
					longitude: 116.39742,
					covers: [{
						latitude: 39.909,
						longitude: 116.39742,
						iconPath: '../../../static/location.png'
					}]
				},
				current: {
					poster: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
					name: '致爱丽丝',
					author: '暂无',
					src: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
				},
				audioAction: {
					method: 'pause'
				},
				params:{},
			};
		},
		onLoad(e) {
			console.log('详情参数',JSON.parse(e.data));
			let data = JSON.parse(e.data);
			this.params= data;
			this.initdata(data);
		},
		methods: {
			showvideo(item){
				this.$refs.screenvideo.prevbox(item)
			},
			async initdata(val){
				let {id,typeChild} = val;
				let result = await searchScheduleInfo({
					id,typeChild
				})
				if(result.statusCode ==200 && result.data.code == 0){
					this.optiondetails = result.data.data;
					if(this.optiondetails.notify){
						this.alerlist = this.optiondetails.notify.split(',');
						
						console.log(this.alerlist);
					}
					if(this.optiondetails.latitude){
						this.covers = {
							latitude: 39.909,
							longitude: 116.39742,
							iconPath: '../../../static/location.png'
						}
					}
					
				}
				if(typeChild  ==2){
					this.getallmonth()
				}
			},
			// 获取当月日程的心得
			async getallmonth(){
				let {id}  =  this.params
				// state  1-待办 2-错过 3-完成未写心得  4-完成写心得
				let schedul =  await showScheduleCalendarById({
					Date:this.timeStr,
					id
				})
				if(schedul.statusCode == 200 && schedul.data.code == 0){
					this.monthlist = schedul.data.data.calendarList;
					console.log('详情事件2222',this.monthlist);
				}
			},
			changemedia(){
				this.$refs.unipopup.close();
				this.mapIsHidden = true;
				// 刷新日历
				this.getallmonth()
				// 重新刷新点击日程的心得
				this.showSchedule()
			},
			formdata(data){
				if(data.statusCode == 200 && data.data.code ==0){
					return true
				}else{
					return false
				}
			},
			async changeclick(val){
				if(val.state ==3){
					// 打开心得
					this.mediaoption = val;
					this.$refs.unipopup.open()
					this.mapIsHidden = false;
				}else if (val.state == 2 || val.state == 1){
					// 完成心得  // 错过完成心得
					let data =  await typeEdit({
						 type:1,
						 id:val.id,
						 typeChild:val.typeChild
					})
					if(this.formdata(data)){
						// 刷新日历
						this.getallmonth()
						// 重新刷新点击日程的心得
						this.showSchedule()
						// let xinde =  await showScheduleExperienceById({
						// 	Date:this.timeStr,
						// 	id:this.params.id
						// });
						// if(xinde.statusCode == 200 && xinde.data.code == 0){
						// 	let result = xinde.data.data;
						// 	this.pindlist = xinde.data.data.List
						// 	uni.showToast({
						// 		title:'已完成',
						// 		icon:'none',
						// 	})
						// }
					}else{
						uni.showToast({
							title:'错误',
							icon:'none'
						})
					}
				}else{
					
					console.log('待办的事');
				}
			},
			// 切换 日 周 年
			changeMode(val) {
				if (this.$refs.calendar) {
					this.$refs.calendar.changeMode()
				}
			},
			// 日周月视图切换
			switchClass(val) {
				console.log(val, this.classShow);
				this.classShow = val;
				this.objstatus.topshow = false;
				this.$forceUpdate()
			},
			daysChange(val) {
				console.log('选择的日期3',val);
				this.timeStr =moment(val).format('YYYY-MM-DD');
				this.getallmonth()
				// 获取当月日程
			},
			changeShow(){
				console.log('选择的日期1');
			},
			changecalender(val) {
				// console.log('val', moment(val).format('YYYY-MM-DD'))
			},
			async showSchedule(){
				let xinde =  await showScheduleExperienceById({
					Date:this.timeStr,
					id:this.params.id
				});
				if(xinde.statusCode == 200 && xinde.data.code == 0){
					let result = xinde.data.data;
					this.pindlist = xinde.data.data.List;
					
				}
			},
			 btnselectdata(val) {
				this.timeStr = val.fullDate;
				this.showSchedule()
				
			},
			videoErrorCallback(e) {
				console.log('hah');
			}
		}
	}
</script>

<style lang="scss">
	audio{
		width: 600rpx;
	}
	
	.mydetailscontent {
		background-color: #000000;
		min-height: 150vh;
	}
	.mymedia{
		background-color: #FFFFFF;
		height: 100vh;
		width: 100%;
		// position: relative;
		border: 1rpx solid red;
		box-sizing: border-box;
		// z-index: 99;
	}
	.myaudio{
		margin:16rpx 0;
		width: 600rpx;
		// height: 300rpx;
		color: #FFFFFF;
		// background-color: #007AFF;
	}
	.rightsave {
		display: flex;
		text {
			color: #FFFFFF;
			margin-left: 16rpx;
			width: 48rpx;
			font-size: 38rpx;
			height: 48rpx;
		}
	}
	
	.btnok{
		.date{
			width: 100%;
			display:flex;
			justify-content: flex-start;
			color: #FFFFFF;
			margin: 16rpx 0;
			padding: 24rpx;
		}
		.confirmbox{
			width: 100%;
		}
		.confirm{
			align-self: center;
			margin-top: 48rpx;
			width: 160rpx;
			height: 60rpx;
			background: #F3916F;
			opacity: 1;
			border-radius: 33px;
			display: flex;
			justify-content: center;
			padding: 5rpx;
			align-items: center;
			.todaywancheng{
				font-size: 48rpx;
				color: #FFFFFF;
			}
		}
		.name{
			padding: 24rpx;
			height: 33rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			// line-height: 42rpx;
			color: #FFFFFF;
			opacity: 1;

		}
	}
	.mylefticon {
		font-size: 40rpx;
		margin-right: 8rpx;
	}

	.details-content {
		// background-color: #01AAED;
		height: 100%;
		padding: 24rpx 16rpx;
		
		.datadetailslist{
			padding:24rpx 54rpx;
			.period{
			height: 33rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			
			// line-height: 42rpx;
			color: #DDDDDD;
			opacity: 1;

			}
			.rightgress{
				height: 33rpx;
				min-width: 100rpx;
				text-align:right;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #DDDDDD;
				opacity: 1;
				text:first-child{
					color: rgba(255, 109, 86, 1);
				}
			}
			.stokewidth{
				flex: 4;
				width: 330rpx;
				margin:0 32rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}
			.list-progress{
				margin-bottom: 8rpx;
				.progress{
					width: 100%;
					flex: 2;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #DDDDDD;
					border-radius: 20rpx;
				}
			}
		}
		.solidbox {
			width: 100%;
			padding-left: 42rpx;
			.solid {
				transform: translateX(10rpx);
				display: block;
				height: 4rpx;
				border-bottom: 1rpx solid rgba(255, 255, 255, .4);
			}
		}

		.remark {
			padding-top: 16rpx;
			padding-left: 26rpx;
			.remark_txt{
				margin-bottom: 16rpx;
			}
			.remark_image1 {
				width: 324rpx;
				height: 324rpx;
			}
			.remark_image2 {
				image {
					height: 220rpx;
					width: 220rpx;
					// margin-bottom: 16rpx;
					margin:8rpx 7rpx;
				}
				flex-flow: row wrap;
			}
			.remark_video2{
				margin:8rpx 7rpx;
				width: 220rpx;
				height: 220rpx;
				border-radius: 10rpx;
				// margin-bottom: 16rpx;
			}
		}

		.titlebox {
			height: 50rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 54rpx;
			color: #FFFFFF;
			opacity: 1;
		}

		.datebox {
			margin-top: 8rpx;
			height: 45rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 42rpx;
			color: #FFFFFF;
			opacity: 1;

		}

		.participant {
			min-height: 86rpx;
			padding: 21rpx 0 16rpx;
			box-sizing: border-box;
			.openall{
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				// line-height: 42rpx;
				color: #999999;
				opacity: 1;
				text:first-child{
					margin-right: 10rpx;
				}

			}
			.pant {
				display: flex;
				height: 48rpx;
				margin-right: 16rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				opacity: 1;
			}

			.distraction {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				// line-height: 42rpx;
				color: #999999;
				opacity: 1;
				margin-right: 16rpx;
			}

			.pantlist {
				display: flex;
				flex: 2;
				align-items: center;

				.personimg {
					width: 48rpx;
					height: 48rpx;
					margin: 0 8rpx;
					text-align: center;
					line-height: 48rpx;
					color: #FFFFFF;
					background: #4A83F1;
					border-radius: 50%;
					opacity: 1;

				}
			}
		}

		.adressbox {
			margin-top: 48rpx;

			.adress {
				width: 100%;
				height: 45px;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 42rpx;
				color: #FFFFFF;
				opacity: 1;
			}

			.map {
				width: 610rpx;
				height: 300rpx;
				background: rgb(15, 14, 5);
				opacity: 1;
				margin: 16rpx 0;
			}
		}
	}
</style>
